<template>
  <div class="check-button" :class="{'checked': isChecked}">
    <img class="img" src="~assets/images/cart/tick.svg" alt />
  </div>
</template>

<script>
export default {
  name: "CheckButton",
  props: {
    isChecked: {
      type: Boolean,
      default: true,
    },
  },
};
</script>

<style lang="less" scoped>
.check-button {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--color-gray);
  background-color: var(--color-background);

  .img {
    width: 100%;
  }
}

.checked {
  background-color: var(--color-tint);
  border-color: var(--color-tint);
}
</style>